<template>
	<div class="home-container">
        <header class="customHeaderStyle">
			<!-- 当在后台模板活动页中头部的东西不能编辑，显示遮罩 -->
			<div class="customHeaderStyle_cover"></div>
			<div @click="goBack">
				<div class="go-back">
					<i></i>  
					<i></i>
					<i></i>
				</div>
			</div>
			<div class="rightIcon">
				<v-CartShowNum></v-CartShowNum>
			</div>
		</header>
		<div class="main" v-sdcon>
			<div class="drag-here-box" v-show="!componentsLength">
				<div class="drag-here">
					主体内容拖拽到此处
				</div>
			</div>
			<component 
				v-for="(item, index) in getRealComponentsList[0][1]" 
				v-sdrag="{componentName: item.componentName, handleType: 'sort', index}" 
				:is="generatorComName(item.componentName)" 
				:key="index" 
				:config="item" 
				:data-id="item.id" 
				:dataList="dataStore[item.componentName][item.id]"
				:part="1">
			</component>
			<div class="footer">
				<!-- <HomeFooter></HomeFooter> -->
			</div>
		</div>
	</div>
</template>
<script>
import { mapGetters } from "vuex";
import initData from "../../utils/lxn/handleData";
import { REAL_PREFIX } from "@/config/components/prefix.js";
import CartShowNum from "../../components/CartShowNum";
// import HomeFooter from "../../components/HomeFooter";
import Header from "../../containers/header";

export default {
	data() {
		return {
		};
	},
	computed: {
		...mapGetters("gw", ["getRealComponentsList"]),
		...mapGetters("xxy", {dataStore: "getDataStore"}),
		componentsLength() {
			if (this.$store.getters["gw/getRealComponentsList"][0][1].length > 0) {
				return true;
			} else {
				return false;
			}
		}
	},
	mounted() {
		console.log("打印看看你有没",this.$store.getters["gw/getRealComponentsList"][0][1])
		initData();
		this.inite();
	},
	components: {
        "v-CartShowNum": CartShowNum,
		HomeFooter
	},
	methods: {
		inite() {
			PSEvent.listen("GiftBuy", (componentObj) => {
				initData(true, componentObj);
			});
		},
		removeListen() {
			PSEvent.remove("GiftBuy");
		},
		generatorComName(baseName) {
			return REAL_PREFIX + baseName;
        },
        //返回上一页
	    goBack() {
				window.history.go(-1);
			},
	},
	beforeDestroy() {
		this.removeListen();
	},
	created() {
		if (!this.$store.getters["cjy/newClassifyData"]) {
			this.$store.dispatch("cjy/queryNewClassifyList");
		}
	}
};
</script>
<style scoped>
.shade-header {
	width: 100%;
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
    height: 60px;
}
.main {
	flex: 1;
	overflow-y: scroll;
}
.home-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: column nowrap;
}
	.drag-here-box {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .drag-here {
        width: 90%;
        height: 180px;
        border: 2px dashed #ddd;
        color: #999;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .customHeaderStyle{
		position: relative;
		background: #fff;
		min-height: 3rem;
		border-bottom: 1px solid #eaeaea;
		color: #444;
		font-weight: 700;
		left: 0;
		top: 0;
		line-height: 2.25rem;
		width: 100%;
		font-size: .9rem;
		text-align: center;
		margin: 0;
		padding: 0;
	}
</style>